<!-- zmSendCode 发送验证码  -->
<template>
  <view :class="typeClass">
    <view class="send-no" v-if="num > 0">重新获取({{ num }})</view>
    <view class="send" @click="handelClick" v-else> 获取验证码 </view>
  </view>
</template>

<script>
  export default {
    name: 'yy-send-code',
    computed: {
      typeClass() {
        return this.type
      }
    },
    props: {
      second: {
        type: Number,
        default: 60
      },
      type: {
        type: String,
        default: 'btn',
        validator: (v) => {
          return ['btn', 'txt', 'auto', 'normal'].includes(v)
        }
      }
    },
    data() {
      return {
        num: 0,
        time: null
      }
    },
    beforeDestroy() {
      this.time && clearInterval(this.time)
    },
    mounted() {},
    methods: {
      begin() {
        this.num = this.second
        console.log('num1424', this.num)
        this.time && clearInterval(this.time)
        this.time = setInterval(() => {
          if (this.num >= 0) {
            this.num--
          } else {
            this.$emit('finish', false) //倒计时完成解绑可重新发送短信
            clearInterval(this.time)
            this.time = null
          }
        }, 1000)
      },
      handelClick() {
        this.$emit('myTap')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .normal {
    .send {
      color: #fff;
      font-size: 26rpx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      padding: 11rpx 26rpx;
      border-radius: 45rpx;
    }

    .send-no {
      color: #fff;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      opacity: 0.4;
      font-size: 26rpx;
      padding: 11rpx 26rpx;
      border-radius: 45rpx;
    }
  }
  .btn {
    .send {
      color: #fff;
      font-size: 26rpx;
      background: $blue;
      padding: 11rpx 26rpx;
      border-radius: 45rpx;
    }

    .send-no {
      color: #fff;
      background: $blue;
      opacity: 0.4;
      font-size: 26rpx;
      padding: 11rpx 26rpx;
      border-radius: 45rpx;
    }
  }

  .txt {
    .send {
      color: $blue;
      font-size: 30rpx;
      text-decoration: underline;
    }

    .send-no {
      color: $gray;
      font-size: 30rpx;
      text-decoration: underline;
    }
  }
  // 自定义更改
  .auto {
    white-space: nowrap;
    .send {
      color: #fff;
      font-size: 28rpx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      padding: 28rpx 26rpx;
      border-radius: 18rpx;
    }

    .send-no {
      color: #fff;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      opacity: 0.4;
      font-size: 28rpx;
      padding: 28rpx 26rpx;
      border-radius: 18rpx;
    }
  }
</style>
